import React, { useState, useEffect, useRef, memo } from 'react';
import Chart1 from './chart1';
import styles from '../index.mod.less';
import _ from 'lodash';
import { connect, useSelector, useDispatch } from 'umi';
import { getCompanyProjCount } from '../../../../../services/kanbanServices';
import kls from 'classnames';

export default function Panel3() {
  const dispatch = useDispatch();
  const [curProjList, setCurProjList] = useState([]);
  const [curProj, setCurProj] = useState(null);
  const [companies, setCompanies] = useState([]);
  const [sumData, setSumData] = useState({ full: 0, done: 0, unDone: 0 });
  const projList = useSelector(s => s.kanban.projList);

  async function handleProjItemClick(item) {
    let _curProj = curProj === item ? null : item;
    setCurProj(_curProj);
    dispatch({
      type: 'kanban/setHighlight',
      payload: {
        key: 'name',
        value: curProj === item ? '' : _curProj.fullName,
        goto:true
      },
    });

  }

  useEffect(() => {
    setSumData(
      projList.reduce(
        (r, e) => {
          if (e.projectStatus == '已完成') {
            r.done += 1;
          } else {
            r.unDone += 1;
          }
          return r;
        },
        { full: projList.length, done: 0, unDone: 0 },
      ),
    );
  }, [projList]);

  // 清楚高亮
  function clearHighlight() {
    dispatch({
      type: 'kanban/setHighlight',
      payload: {
        key: 'name',
        value: '',
      },
    });
  }

  function loadAllProjCompanies() {
    getCompanyProjCount().then(response => {
      if (response && response.data) {
        const respData = response.data;
        if (respData && respData.code === 200 && respData.success) {
          const { data } = respData;
          if (_.isArray(data)) {
            setCompanies(data);
          }
        }
      }
    });
  }

  useEffect(() => {
    clearHighlight();
  }, [curProjList]);

  useEffect(() => {
    loadAllProjCompanies();
  }, []);

  return (
    <>
      <div className={styles.count}>
        <span className={styles.countTxt}>
          <span>项目总数</span>
          <span></span>
        </span>
        <span className={styles.countNum}>{sumData.full}</span>
        <span className={styles.corner}></span>
      </div>
      <div className={styles.classCount}>
        <div className={styles.classify}>
          <span className={styles.icon}>
            <img alt={''} src={require('../../images/本地文件夹.svg')} height={24} width={24} />
            <img alt={''} src={require('../../images/打钩.svg')} height={10} width={10} />
          </span>
          <div className={styles.content}>
            <span>已完成</span>
            <span></span>
            <span style={{ color: 'rgba(47, 255, 159, 1)' }}>{sumData.done}</span>
          </div>
        </div>
        <div style={{ width: 19, flex: 'none' }}></div>
        <div className={styles.classify}>
          <span className={styles.icon}>
            <img alt={''} src={require('../../images/本地文件夹.svg')} height={24} width={24} />
            <img alt={''} src={require('../../images/时间.svg')} height={16} width={16} />
          </span>
          <div className={styles.content}>
            <span>未完成</span>
            <span></span>
            <span style={{ color: 'rgba(255, 221, 47, 1)' }}>{sumData.unDone}</span>
          </div>
        </div>
      </div>
      <div className={styles.divide} style={{ marginTop: 26 }}></div>
      <Chart1 setCurProjList={setCurProjList} />
      <div className={styles.divide}></div>
      <div className={kls(styles.listTitle, 'side-panel2-subtitle')}>项目列表</div>
      <div className={styles.list}>
        {!!curProjList?.length &&
          curProjList.map((item, i) => {
            return (
              <div
                key={item.fullName}
                className={kls(styles.listItem, {
                  [styles.listItemActive]: curProj === item,
                })}
                onClick={() => {
                  handleProjItemClick(item)
                }}
              >
                <div className={styles.listItemNum}>{i + 1}</div>
                <div className={styles.listItemName} title={item.projectName}>
                  {item.projectName}
                </div>
              </div>
            );
          })}
      </div>
    </>
  );
}
